<template>
  <view class="index">
    <view class="treatment-title fontsize14">
      请描述你的疾病或症状、是否用药，需要提供什么样的帮助。
      <span class="color3FA" @click="showDesc">如何描述</span>
      ?
    </view>
    <view class="main">
      <view class="tip color999 fontsize14">
        本平台为您保障隐私，内容仅医生可见
      </view>
      <view class="line"></view>
    </view>
    <view class="textarea-box">
      <view class="textarea-title">病情描述</view>
      <textarea class="textarea" v-model="Diseasequery.depict" placeholder="请描述一下创面症状..." />
      <MyUpload @uploadarr="uploadarr" @delarr="delarr"></MyUpload>
    </view>
    <view class="textarea-box">
      <view class="textarea-title">医院检查（非必填项）</view>
      <textarea class="textarea" v-model="Diseasequery.examine"
        placeholder="如果您在医院治疗过,请描述一下医院检查结果并上传下检验报告,方便医生更好地为您服务..." />
      <MyUpload @uploadarr="uploadarr2" @delarr="delarr2"></MyUpload>
    </view>
    <view class="treatbtn">
      <my-button border background="#FFF" color="#3FA3FA" borderRadius="8" height="96" hoverClass="none" width="320"
        @click="submit(1)">
        在线问诊
      </my-button>
      <my-button borderRadius="8" height="96" width="320" hoverClass="none" @click="Hometreatment">
        上门治疗
      </my-button>
    </view>
    <view v-if="descshow" @click="hidedesc" class="Desccon">
      <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/decs.png" mode=""></image>
    </view>
    <DrugWithdrawal v-if="traeteshow" :content="content" :title="title" cancelcontent="不需要" submitcontent="需要"
      @submit="submit(2)" @cancel="cancel"></DrugWithdrawal>
    <!-- <TabBar :current-page="1" /> -->
  </view>
</template>

<script>
import MyUpload from "../../component/My-upload.vue";
import DrugWithdrawal from "../../component/Drugwithdrawal.vue";
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
  components: {
    MyUpload,
    DrugWithdrawal,
    MyButton
  },
  data() {
    return {
      descshow: false,
      pic_arr: [],
      content: "目前平台上门医生只负责慢性病疮口的治疗，您确定需要医生上门吗？",
      title: "",
      traeteshow: false,
      Diseasequery: {
        category: "", //	必选	Integer	1:在线问诊2:上门治疗
        depict: "", //	必选	String	病情描述
        depictImage: "", //	必选	String	病情描述图片
        duration: "", //	必选	String	时长
        examine: "", //	必选	String	医院检查
        medication: "", //	必选	String	用药情况
        imageUrls: "", //	必选	String	图片内容多个以逗号拼接
        patientId: "", //	必选	String	患者表ID
      },
    };
  },
  onLoad() {
    if (!uni.getStorageSync("token")) {
      uni.reLaunch({
        url: "../login/login",
      });
    }
  },
  onShow() {
    this.descshow = false;
  },
  methods: {
    showDesc() {
      this.descshow = true;
    },
    hidedesc() {
      this.descshow = false;
    },
    //取消弹窗
    cancel() {
      this.traeteshow = false;
    },
    uploadarr(arr) {
      this.Diseasequery.imageUrls = arr.join(",");
    },
    delarr(arr) {
      this.Diseasequery.imageUrls = arr.join(",");
    },
    uploadarr2(arr) {
      this.Diseasequery.depictImage = arr.join(",");
    },
    delarr2(arr) {
      this.Diseasequery.depictImage = arr.join(",");
    },
    //选择患者
    submit(e) {
      this.Diseasequery.category = e;
      if (!this.Diseasequery.depict) {
        this.$toast("请填写病情描述");
        return;
      }
      let Diseasequery = encodeURIComponent(JSON.stringify(this.Diseasequery));
      console.log("Diseasequery", this.Diseasequery);
      uni.navigateTo({
        url: "../treatment/patient/patient?Diseasequery=" + Diseasequery,
      });
    },

    Hometreatment() {
      this.traeteshow = true;
    },
    //确认修改
    todeit() {
      uni.navigateTo({
        url: "editsuccess/editsuccess",
      });
    },
  },
};
</script>

<style lang="scss">
.index {
  padding-bottom: 110rpx;
}

.treatment-title {
  background-color: #f7f7f7;
  padding: 24rpx 68rpx;
}

.main {
  padding: 0 40rpx;

  .tip {
    margin: 20rpx 0;
  }

  .line {
    height: 18rpx;
    background-color: #f7f7f7;
  }
}

.textarea-box {
  width: 100%;
  padding: 20rpx 40rpx;
  border-bottom: 1px solid #eee;

  .textarea-title {
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }

  .textarea {
    width: 100%;
    height: 120rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    overflow-y: auto;
  }
}

.treatbtn {
  margin-top: 40rpx;
  width: 100%;
  // position: fixed;
  // left: 0;
  // bottom: 110rpx;
  padding: 0 40rpx 72rpx 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
}

.Desccon {
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

.Desccon image {
  width: 100vw;
  height: 1100rpx;
  // margin-top: 80rpx;
}
</style>
